<template>
  <div class="about">
    <!-- 头部 -->
    <mt-header title="约苗" class="mt-header">
      <mt-button icon="more" slot="right" @click="showShare = true"></mt-button>
        <router-link to="/" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
    </mt-header>
    <!-- 分享 -->
      <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      lock-scroll
      />
      <!-- 通知 -->
      <van-notice-bar
    left-icon="volume-o"
    text="人人接种新冠疫苗，切断病毒传播链条。接种新冠疫苗，是切断新冠疫苗传播有效方法。"
      />
      <!-- 主页 -->
      <van-image
        class="img"
        style="width:100%;"
        :src="require(`../assets/about/${tupian}`)"
      />
      <!-- 卡片 -->
      <router-link v-for="i of nr" :key="i.id" to="/yuyue">
        <div class="card">
          <div class="title_1">{{i.title}}</div>
          <div class="title_2">{{i.neirong}}</div>
          <img src="../assets/about/tiaozhuan.png">
        </div>
      </router-link>
  </div>
</template>



<script>
export default {
  data() {
    return {
       // 分享本网站   
      showShare: false,
      arr: '',
      id : '',
      tupian:'01.png',
      nr:{},
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
    }
  },
  mounted() {
    let id = this.$route.query.id
    //console.log(id);
    // 发送axios请求
    let url = `/about?id=${id}`
    this.axios.get(url).then(results=>{
      //console.log(results)
      //存入data
      this.arr = results.data.results;
      this.id = id-1;
      // 解决第一次编译图片为空报错问题
      this.tupian = this.arr[this.id].tupian;
    })
    
    this.axios.get("/shouyenr",
            {
                params:{nr_id:id}
            }).then(result=>{
            //console.log(result.data.results)
            this.nr=result.data.results
            //console.log(this.nr)
        })
  },

}
</script>



<style scoped>
.about .mt-header{
  background-color: #4fc08d;
}
.about .card{
  position: relative;
  margin: 0 1.2em;
  border-radius: 10px;
  height: 5em;
  line-height: 28px;
  margin-bottom: 15px;
  box-shadow:0 0 12px #8484;
  border: 1px solid rgba(102, 93, 93, 0.143);
}
.about .title_1{
  font-size: 15px;
  margin-top: 13px;
  margin-left: 1.5em;
  font-family: '微软雅黑';
  font-weight: bolder;
  color: black;
}
.about .title_2{
  font-size: 9px;
  color: #807b7b;
  margin-left: 2.5em;
}
.about .card img{
  position: absolute;
  right: 5%;
  top: 37%;
}
</style>
